<template>
  <div class="app-container">
    <div class="filter-container" style="margin-top:0px;padding-bottom: 0px;">
      <div class="box1">
        <el-tooltip class="item" effect="light" content="还原" placement="top">
          <el-button class="filter-item" icon="el-icon-refresh-left" type="primary" @click.stop="handleReduction" />
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="删除" placement="top">
          <el-button class="filter-item" icon="el-icon-delete" type="danger" @click.stop="handleRemove" />
        </el-tooltip>
      </div>
      <div class="box2">
        <el-input v-model="queryPage.name" class="filter-item" placeholder="文档名称" style="width: 150px" clearable />
        <el-tooltip class="item" content="查询" placement="top" effect="light">
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()" />
        </el-tooltip>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="userList"
      :height="tableHeight4"
      style="width: 100%; overflow:auto;font-size: 14px; font-family: 黑体;color: #474a4d;font-weight:100;"
      tooltip-effect="dark"
      @cell-mouse-enter="cellMouseEnter"
      @cell-mouse-leave="cellMouseLeave"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" header-align="center" align="center" label="序号" width="80px" />
      <el-table-column type="selection" header-align="center" align="center" />
      <el-table-column header-align="center" align="left" label="文档名" show-overflow-tooltip>
        <template slot-scope="scope">
          <img
            v-if="!scope.row.suffix"
            style="position: absolute;top:14px"
            src="../../../assets/images/Folder-02.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='docx' || scope.row.suffix==='doc'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Word.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='xlsx' || scope.row.suffix==='xls'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Excel.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='png'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Picture.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='jpg'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Picture.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='jpeg'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Picture.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='pdf'"
            style="position: absolute;top:14px"
            src="../../../assets/images/PDF.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='ppt'"
            style="position: absolute;top:14px"
            src="../../../assets/images/PPT.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='txt'"
            style="position: absolute;top:14px"
            src="../../../assets/images/TXT.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='zip'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Zip.png"
            width="18px"
            height="18px"
          >
          <img
            v-else
            style="position: absolute;top:14px"
            src="../../../assets/images/Unknown.png"
            width="18px"
            height="18px"
          >
          <label style="margin-left:40px;width:160px;">
            <span v-if="!['png','jpeg','jpg','pdf','docx','doc'].includes(scope.row.suffix)">{{ scope.row.originalName }}</span>
            <span v-else-if="['png','jpeg','jpg','pdf','docx','doc'].includes(scope.row.suffix)">
              <a
                v-permission="['PUBLIC_FILE_YULAN']"
                style="color:#606266;"
                target="_blank"
                @click="yulan(scope)"
                v-html="scope.row.originalName"
              />
            </span>
          </label>
          <label style="position: absolute;right:0;display:none;color:#409eff">
            <label class="btn3" @click.stop="onReduction(scope)">
              <i class="el-icon-refresh-left" title="还原" /> <span>还原</span>
            </label>
            <label class="btn3" @click.stop="onDelete(scope)">
              <i class="el-icon-delete" title="删除" /> <span>删除</span>
            </label>
          </label>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="大小" width="100px">
        <template slot-scope="scope">
          <span v-if="scope.row.fileSize === '-'">-</span>
          <span v-else>{{ scope.row.fileSize }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="删除人员" width="180px">
        <template slot-scope="scope">
          <span>{{ scope.row.modifyuserName }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="删除时间" width="180px">
        <template slot-scope="scope">
          {{ scope.row.modifytimeTi }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />
  </div>
</template>

<script>
import { deleteInLogic, deleteAllInCatalogOrFile } from '@/api/publicCatalog'
import { getListPageInState } from '@/api/publicFile'
import { tableHeight4 } from '@/utils/tableHeight'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'

export default {
  name: 'Hsz',
  components: { Pagination },
  mixins: [tableHeight4],
  data() {
    return {
      listLoading: false,
      total: 0,
      multipleSelection: [],
      userList: [],
      queryPage: {
        page: 1,
        limit: 20,
        name: '',
        state: '-1'
      },
      ShowHidden: false,
      seen: false
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.userList = []
      this.listLoading = true

      getListPageInState(this.queryPage).then(response => {
        const { data } = response
        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i])
      }
    },
    // 点击页面事件 隐藏需要隐藏的区域
    HiddenClick() {
      this.ShowHidden = false
    },
    // 鼠标划入展示
    enter() {
      this.seen = true
      this.ShowHidden = false
    },
    // 鼠标移除隐藏
    leave() {
      this.seen = false
      this.ShowHidden = false
    },
    // 鼠标移入行
    cellMouseEnter(row, column, cell, event) {
      // 显示操作条  找一个特殊的条件判断，否则影响其他元素
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'inline'
        this.ShowHidden = false
      }
    },
    cellMouseLeave(row, column, cell, event) {
      // 隐藏操作条
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'none'
        this.ShowHidden = false
      }
    },
    // 批量还原
    handleReduction() {
      if (this.multipleSelection.length === 0) {
        Message({
          message: '至少选择一条数据',
          type: 'error',
          duration: 2 * 1000
        })
        return
      }
      this.$confirm('是否还原选中的文件夹或文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '还原中......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        var ids = this.multipleSelection.map(item => item.id).join()// 获取所有选中行的id组成的字符串，以逗号分隔
        deleteInLogic({ ids: ids, status: '1' }).then(response => {
          Message({
            message: '还原成功',
            type: 'success',
            duration: 5 * 1000
          })
          loading.close()
          // 重新加载表格
          this.search()
        }).catch(response => {
          loading.close()
          this.search()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消还原'
        })
      })
    },
    // 批量删除
    handleRemove() {
      if (this.multipleSelection.length === 0) {
        Message({
          message: '至少选择一条数据',
          type: 'error',
          duration: 2 * 1000
        })
        return
      }
      this.$confirm('是否删除选中的文件夹或文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        var ids = this.multipleSelection.map(item => item.id).join()// 获取所有选中行的id组成的字符串，以逗号分隔
        deleteAllInCatalogOrFile({ ids: ids }).then(response => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 5 * 1000
          })
          loading.close()
          // 重新加载表格
          this.search()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onReduction(data) {
      this.$confirm('是否还原选中的文件夹或文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '还原中......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteInLogic({ ids: data.row.id, status: '1' }).then(response => {
          Message({
            message: '还原成功',
            type: 'success',
            duration: 5 * 1000
          })
          loading.close()
          // 重新加载表格
          this.search()
        }).catch(response => {
          loading.close()
          this.search()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消还原'
        })
      })
    },
    onDelete(data) {
      this.$confirm('是否删除选中的文件夹或文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteAllInCatalogOrFile({ ids: data.row.id }).then(response => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 5 * 1000
          })
          loading.close()
          // 重新加载表格
          this.search()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.app-container{
  padding:10px 20px;
}
.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .date-filter-item{
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .box1 {
    flex: 1;
    vertical-align: middle;
    float: inline-start;
  }
  .box2 {
    flex: 1;
    text-align: end;
    float: inline-end;
  }
}
.pagination-container {
  margin-top: 0 !important;
  padding: 10px 16px !important;
}
</style>

<style scoped>
label {
  font-weight: normal;
}

.btn1 {
  margin-top: 25px;
  margin-left: 60px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  left: 0;
  color: #409eff;
  border: 1px solid #ccc;
  z-index: 999;
  text-align: left;
}
.btn2 {
  padding: 5px 10px;
  margin: 0px 0px;
  cursor: pointer;
  text-align: left;
  display: block;
  border-bottom: 1px solid #ccc;
}
.btn2 span{
  color: #828282;
}
.btn3 {
  margin: 0px 5px;
  cursor: pointer;
  display: inline-block;
}

</style>
